<template>
  <div class="home-page">
    <el-card class="outer-container">
      <template #header>
        信息统计
      </template>

      <div class="stat-container">
        <!-- 统计信息框 -->

        <el-card class="stat-box">
          <template #header>
            设备统计
          </template>
          <el-col>
            <el-statistic title="运行中设备" :value="onlineDevices" >
              <template #suffix> / {{ totalDevices }}</template>
            </el-statistic>
            <el-statistic title="故障设备" :value="faultyDevices" />
          </el-col>
        </el-card>
        

        <!-- 人员数量框 -->
        <el-card class="stat-box">
          <template #header>
            人员统计
          </template>
          <el-col>
            <el-statistic title="维修人员数量" :value="repairmanNumber" />
            <el-statistic title="运维人员数量" :value="checkmanNumber" />
          </el-col>
        </el-card>

        <!-- 总用水量框 -->
        <el-card class="stat-box">
          <template #header>
            用水统计
          </template>
          <el-col>
            <el-statistic title="今日用水总量" :value="totalWaterUsage" >
              <template #suffix> ml</template>
            </el-statistic>
            <el-statistic title="今日总收入" :value="orderPriceTotal" precision="2">
              <template #suffix> 元</template>
            </el-statistic>
          </el-col>
        </el-card>

      </div>
    </el-card>
  </div>
  <el-card class="outer-container">
      <template #header>
        设备地图
      </template>
      <div class="map">
          <div class="map-main-map" id="map"></div>
      </div>
  </el-card>
</template>

<style scoped>

.outer-container {
  background-color: white;
  margin-bottom: 30px;
}

.stat-container {
  display: flex;
  margin-bottom: 1px;
  gap: 80px;
}

.stat-box {
  padding: 15px;
  width: 100%;
  text-align: center;
  margin-bottom: 1px;
}



.stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.stat p {
  margin: 0;
}

.map {
  margin-top: 1px;
  text-align: center;
}

.map-title {
  font-weight: 500;
  font-size: 24px;
  color: #333333;
}

.map-main {
  margin-top: 10px;
  display: flex;
}

.map-main-map {
  width: 100%;
  height: 520px;
}
</style>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'

import {orderStatisticAllService} from '@/api/order.js'
import {repairStatisticAllService} from '@/api/repair.js'
import {deviceStatisticAllService} from '@/api/device.js'
import { addMarker, getCurrentPosition, loadMap } from '../utils/map';
import { getAllDistrictsList } from '../utils/district';
import { districtTreeQueryService } from '@/api/district.js';

const props = defineProps({
  initData: {
    type: Object,
    default: {},
  },
})


const totalDevices = ref(0)
const repairmanNumber = ref(0)
const checkmanNumber = ref(0)
const totalWaterUsage = ref(0)
const orderPriceTotal = ref(null)
const offlineDevices = ref(0)
const faultyDevices = ref(0)
const onlineDevices = ref(0)

let map = null

const getDeviceStatisticAll = async() =>{
    let result = await deviceStatisticAllService()
    let data = result.data
    totalDevices.value = data.deviceNumberTotal
    offlineDevices.value = data.deviceNumberOffline
    faultyDevices.value = data.deviceNumberFault
    onlineDevices.value = data.deviceNumberWorking
}


const getRepairmanStatisticAll = async() =>{
    let result = await repairStatisticAllService()
    let data = result.data
    repairmanNumber.value = data.repairmanNumber
    checkmanNumber.value = data.checkmanNumber
}


const getOrderStatisticAll = async() =>{
    let result = await orderStatisticAllService()
    let data = result.data
    totalWaterUsage.value = data.waterAmountTotal
    orderPriceTotal.value = data.orderPriceTotal
}

const init = () => {
  getDeviceStatisticAll()
  getRepairmanStatisticAll()
  getOrderStatisticAll()
  initMap()
}

const initMap = async () => {
  map = await loadMap("map")
  let result = await districtTreeQueryService(-1)
  let list = getAllDistrictsList(result.data)
  list.forEach((item)=>{
    addMarker(map, item.data.longitude, item.data.latitude, item.data.name, `饮水机数: ${item.data.devDrkSum} 制水机数: ${item.data.devMakSum}`)
  })
  console.log(list)
}

onMounted(() => {
  init()
})

watch(
  () => props.initData,
  (newVal) => {
    if (newVal?.home?.position) {
      const position = newVal.home.position.split(',')
      if (position.length === 2) {
        center.value = new TMap.LatLng(Number(position[0]), Number(position[1]))
        if (map) {
          map.setCenter(center.value)
          updateMarker(center.value)
        }
      }
    }
  },
  { immediate: true }
)


</script>
